<!--
 * @Author: Devin
 * @Date: 2022-02-28 14:29:37
 * @LastEditors: Devin
 * @LastEditTime: 2022-04-20 17:23:15
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="普通日期选择器（本地数据模式）">
        <template #header>
          <div class="el-card-header">普通日期选择器（本地数据模式）</div>
          <div class="el-card-header-tip">将el-option内部实现，减少开发人员编写html代码</div>
        </template>
        <CcSelect v-model="data" :options="options" filterable @change="change"> </CcSelect>
        <Code></Code>
      </el-card>
      <el-card id="普通日期选择器（远程数据模式）">
        <template #header>
          <div class="el-card-header">
            普通日期选择器（远程数据模式）<span style="color: red">若出现404请刷新下</span>
          </div>
          <div class="el-card-header-tip">内部实现接口请求，并且赋值，设置了禁用选项</div>
        </template>
        <CcSelect
          v-model="data1"
          :optionsKey="{ value: 'id', label: 'name' }"
          url="/select/list"
          :params="{ num: 20 }"
          filterable
          @change="change"
          :dataHandler="dataHandler"
        >
        </CcSelect>
        <Code></Code>
      </el-card>
      <el-card id="虚拟选择器（远程数据模式）">
        <template #header>
          <div class="el-card-header">虚拟选择器（远程数据模式）</div>
          <div class="el-card-header-tip">其他未做改变，内部实现了远程数据</div>
        </template>
        <CcSelectV
          v-model="data2"
          :optionsKey="{ value: 'id', label: 'name' }"
          url="/select/list"
          :params="{ num: 5000 }"
          filterable
          @change="change"
        >
        </CcSelectV>
        <Code></Code>
      </el-card>
    </div>
    <div class="right">
      <CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';

export default defineComponent({
  setup() {
    const state: { options: any; data: any } = reactive({
      sections: [
        {
          label: '普通日期选择器（本地数据模式）'
        },
        { label: '普通日期选择器（远程数据模式）' },
        { label: '虚拟选择器（远程数据模式）' }
      ],
      options: [
        {
          value: 'Option1',
          label: 'Option1'
        },
        {
          value: 'Option2',
          label: 'Option2'
        },
        {
          value: 'Option3',
          label: 'Option3'
        },
        {
          value: 'Option4',
          label: 'Option4'
        },
        {
          value: 'Option5',
          label: 'Option5'
        }
      ],
      data: '',
      data1: '',
      data2: ''
    });
    const change = (data: any, dataObj: any) => {
      console.log(data);
      console.log(dataObj);
    };
    const dataHandler = (item: { disabledFun: (data: any) => any }, i: any) => {
      item.disabledFun = (data: { status: any }) => {
        return data.status;
      };
    };
    return { ...toRefs(state), change, dataHandler };
  }
});
</script>

<style scoped></style>
